<template>
  <a-card :bordered="false">
    <!--     查询区域-->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row type="flex">
          <a-col>
            <a-button icon="plus" style="margin-right: 20px" type="primary" @click="openAdd()">新增</a-button>
            <a-divider style="margin-right: 20px" type="vertical" />
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="年份">
              <a-select v-model="queryParam.year" placeholder="请选择年份">
                <a-select-option v-for="(i, index) in yearList" :key="index" :value="i.key"
                  >{{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="月份">
              <a-select v-model="queryParam.monthStr" placeholder="请选择月份">
                <a-select-option v-for="(i, index) in monthList" :key="index" :value="i.key"
                  >{{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="区域">
              <a-select v-model="queryParam.area" placeholder="请选择区域">
                <a-select-option v-for="(i, index) in selectList" :key="index" :value="i.key"
                  >{{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col flex="auto" style="margin-left: 15px">
            <span class="table-page-search-submitButtons" style="float: left; overflow: hidden; margin-right: 20px">
              <a-button icon="search" style="margin-left: 10px" type="primary" @click="searchQuery">查询</a-button>
              <a-popover :overlayStyle="{ background: 'white' }" placement="topLeft">
                <template slot="content">
                  <a-icon theme="twoTone" two-tone-color="#52c41a" type="exclamation-circle" /><span
                    style="margin-left: 5px"
                    >可以点击重置来重新筛选结果</span
                  >
                </template>
                <a-button icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
              </a-popover>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="processedDataSource"
        :loading="loading"
        :pagination="ipagination"
        bordered
        rowKey="id"
        size="middle"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a-button style="margin-right: 10px" type="primary" @click="handleEdit(record)"> 编辑 </a-button>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a-button> 删除 </a-button>
          </a-popconfirm>
        </span>
        <span slot="lamp" slot-scope="text, record">
          <!--          0-红灯 1-黄灯 2-绿灯-->
          <span
            class="status-circle"
            :class="{
              'status-2': record.lamp === '2',
              'status-1': record.lamp === '1',
              'status-0': record.lamp === '0',
            }"
          ></span>
        </span>
      </a-table>
      <monitor-modal ref="modalForm" @ok="modalFormOk"></monitor-modal>
    </div>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@api/manage'
import MonitorModal from '@views/dataVisualization/components/monitorModal'
// import FieldCarbonModal from '@views/dataVisualization/components/fieldCarbonModal'

const date = new Date()
const count = date.getFullYear() - 2020
const yearList = []
for (let i = 0; i < count + 1; i++) {
  yearList.push({
    name: date.getFullYear() - i,
    key: date.getFullYear() - i,
  })
}
const monthList = ['1-2', '1-3', '1-4', '1-5', '1-6', '1-7', '1-8', '1-9', '1-10', '1-11', '1-12']

export default {
  name: 'monthMonitor',
  components: { MonitorModal },
  // components: { FieldCarbonModal },
  mixins: [JeecgListMixin],
  data() {
    return {
      queryParam: {
        year: 2024, // 设置默认年份为2024
        monthStr: '1-2',
      },
      selectList: [
        { name: '全市', key: '全市' },
        { name: '各区平均', key: '各区平均' },
        { name: '黄浦区', key: '黄浦区' },
        { name: '徐汇区', key: '徐汇区' },
        { name: '长宁区', key: '长宁区' },
        { name: '静安区', key: '静安区' },
        { name: '普陀区', key: '普陀区' },
        { name: '虹口区', key: '虹口区' },
        { name: '杨浦区', key: '杨浦区' },
        { name: '闵行区', key: '闵行区' },
        { name: '宝山区', key: '宝山区' },
        { name: '嘉定区', key: '嘉定区' },
        { name: '浦东新区', key: '浦东新区' },
        { name: '金山区', key: '金山区' },
        { name: '松江区', key: '松江区' },
        { name: '青浦区', key: '青浦区' },
        { name: '奉贤区', key: '奉贤区' },
        { name: '崇明区', key: '崇明区' },
      ],
      monthList: [
        { name: '1-1', key: '1-1' },
        { name: '1-2', key: '1-2' },
        { name: '1-3', key: '1-3' },
        { name: '1-4', key: '1-4' },
        { name: '1-5', key: '1-5' },
        { name: '1-6', key: '1-6' },
        { name: '1-7', key: '1-7' },
        { name: '1-8', key: '1-8' },
        { name: '1-9', key: '1-9' },
        { name: '1-10', key: '1-10' },
        { name: '1-11', key: '1-11' },
        { name: '1-12', key: '1-12' },
      ],
      yearList: yearList,
      confirmLoading: false,
      title: '',
      visible: false,
      dataSource: [],
      form: this.$form.createForm(this),
      dialogStyle: {
        top: '200px',
        // right:"20px",
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      columns: [
        {
          title: '分区',
          align: 'center',
          dataIndex: 'area',
        },
        // {
        //   title: '时间区间',
        //   align: 'center',
        //   dataIndex: 'monthStr',
        // },
        {
          title: '全区合计',
          align: 'center',
          children: [
            {
              title: '同比增长(%)',
              dataIndex: 'totalYoy',
              align: 'center',
            },
          ],
        },
        {
          title: '工业',
          align: 'center',
          children: [
            {
              title: '同比增长(%)',
              dataIndex: 'industryYoy',
              align: 'center',
            },
          ],
        },
        {
          title: '其他产业（不含车辆用油）',
          align: 'center',
          children: [
            {
              title: '同比增长(%)',
              dataIndex: 'otherYoy',
              align: 'center',
            },
          ],
        },
        {
          title: '住宅',
          align: 'center',
          children: [
            {
              title: '同比增长(%)',
              dataIndex: 'buildYoy',
              align: 'center',
            },
          ],
        },
        {
          title: '社会车辆',
          align: 'center',
          children: [
            {
              title: '同比增长(%)',
              dataIndex: 'carYoy',
              align: 'center',
            },
          ],
        },
        {
          title: '警示情况',
          dataIndex: 'lamp',
          scopedSlots: { customRender: 'lamp' },
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200,
        },
      ],
      url: {
        list: '/carbon/earlyWarnPrediction/list',
        delete: '/carbon/earlyWarnPrediction/delete',
      },
    }
  },
  methods: {
    openAdd() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    preprocessDataSource(dataSource) {
      const bottomRows = []
      const normalRows = []

      dataSource.forEach((row) => {
        if (row.area === '全市' || row.area === '各区平均') {
          bottomRows.push(row)
        } else {
          normalRows.push(row)
        }
      })

      // Sort bottom rows so that '全市' always stays at the bottom
      bottomRows.sort((a, b) => {
        if (a.area === '全市' && b.area === '各区平均') return 1
        if (a.area === '各区平均' && b.area === '全市') return -1
        return 0
      })

      return [...normalRows, ...bottomRows]
    },
  },
  mounted() {
    getAction(this.url.list, '').then((res) => {
      if (res.success) {
        this.yearList = res.result.yearList.map((item) => {
          return {
            name: item,
            key: item,
          }
        })
        this.monthList = res.result.monthList.map((item) => {
          return {
            name: item + '月',
            key: item,
          }
        })
      }
    })
  },

  computed: {
    processedDataSource() {
      return this.preprocessDataSource(this.dataSource)
    },
  },
}
</script>

<style scoped lang="stylus">
.status-circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 5px;
}

.status-2 {
  background-color: green;
}

.status-1 {
  background-color: orange;
}

.status-0 {
  background-color: red;
}
</style>
